<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传附件</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>


</head>
<body style="padding: 15px;" >

    <div id="app" >
        <!-- 操作附件列表按钮部分 -->
        <div v-if="parmsData.view != '-1'">
            <el-upload
                    class="upload-demo"
                    ref="upload"
                    :action="actionUrl"
                    :data="other"
                    multiple
                    :headers="headers"
                    :file-list="fileList"
                    :show-file-list="false"
                    :on-change="handleChange"
                    :before-upload="before"
                    :on-success="handleSuccess"
                    :auto-upload="false"
                    list-type="picture"
            >
                <el-button slot="trigger" size="small" type="primary"
                >选取文件</el-button
                >
                <el-button
                        style="margin-left: 10px"
                        size="small"
                        type="success"
                        @click="submitUpload"
                >上传</el-button>
            </el-upload>
            <!--<el-button type="primary" size="small" @click="openUpload"
              >上传附件</el-button
            >-->
            <!-- <el-button type="danger" size="small" @click="delectUploadRow"
               >删除</el-button
             >-->
        </div>
        <!-- 已上传附件列表 -->
        <el-table
                ref="uploadTable"
                :data="uploadList"
                @row-click="rowClick"
                @selection-change="changeSelect"
                :row-style="rowClass"
                height="350px"
                style="width: 100%; margin-top: 10px"
        >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="filename" label="文件名称"> </el-table-column>
            <!--<el-table-column prop="txt" label="文件说明"> </el-table-column>-->
            <el-table-column prop="scr" label="上传人"> </el-table-column>
            <el-table-column prop="scsj" label="上传时间"> </el-table-column>

            <el-table-column prop="status" label="状态" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.status == 'ready' ? 'warning' : 'success'"
                            size="small"
                    >{{ scope.row.status == "ready" ? "待上传" : "已上传" }}</el-tag
                    >
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" >
                <template slot-scope="scope">
                    <!-- <a target="_black" :href="scope.row.path">查看</a> -->
                    <el-button v-if="scope.row.status == 'success'"
                               @click.stop="lookList(scope.row)"
                               type="success"
                               size="mini"
                    >查看</el-button
                    >

                    <el-button
                            v-if="parmsData.view != '-1'"
                            @click.stop="deleteUpload(scope.row)"
                            type="danger"
                            size="mini"
                    >删除</el-button
                    >

                </template>
            </el-table-column>
        </el-table>
    </div>

    <script>


        var vm = new Vue({
           el:"#app",
            data() {
                return {
                    // 上传附件列表
                    uploadList: [],
                    chooseArr: [],
                    selectRow: [],
                    selectStr: "",

                    parmsData:{},

                    // 上传附件弹窗
                    uploadvisible: false,
                    fileList: [],
                    other: {
                        dataid: "",
                        type: 1,
                    },
                    headers: {
                        token: localStorage.getItem("token"),
                    },
                    // actionUrl:
                    //   "http://121.43.175.154:9004/admin/api/mirc/MedicalInsuranceReimbursementController/upload",
                    // url: "http://121.43.175.154:9004/",
                    actionUrl:
                        wwwurl+"/admin/api/mirc/MedicalInsuranceReimbursementController/upload",
                    url: "",
                };
            },
            created(){
               this.parmsData = getParams();
               this.other.type = this.parmsData.typeId;
               this.other.dataid = this.parmsData.dataid;
               this.getUploadList();
            },
            methods: {
                // 获取上传附件列表
                async getUploadList() {
                    console.log(this.other);
                    const res = await api.queryBody(
                        "/admin/api/mirc/MedicalInsuranceReimbursementController/atthList",
                        this.other
                    );
                    if (res.code == 1) {
                        console.log(res.data);
                        this.uploadList = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                lookList(row) {
                    window.open(wwwurl +"/"+ row.path);
                },
                // 删除上传附件信息
                async delectUploadRow() {
                    if (this.selectStr == "") {
                        this.$message.error("请选择一条数据");
                    } else {
                        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        })
                            .then(async () => {
                                // 准备参数
                                const params = {
                                    ids: this.selectStr,
                                };
                                const res = await api.queryBody(
                                    "/admin/api/mirc/MedicalInsuranceReimbursementController/deleteAtthFiles",
                                    params
                                );
                                if (res.code == 1) {
                                    this.$message.success(res.msg);
                                    this.getUploadList();
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                            .catch(() => {
                                this.$message.info("已取消删除");
                            });
                    }
                },
                // 点击表格行
                rowClick(row) {
                    console.log(1);
                    this.$refs.uploadTable.toggleRowSelection(row);
                },
                // 监听多选框
                changeSelect(selection) {
                    this.chooseArr = selection;
                    if (selection.length == 0) {
                        this.selectStr = "";
                    } else {
                        for (let i = 0; i < selection.length; i++) {
                            if (i == 0) {
                                this.selectStr = selection[i].id;
                            } else {
                                this.selectStr = this.selectStr + "," + selection[i].id;
                            }
                        }
                    }
                },
                // 多选高亮选中行
                rowClass({ row, rowIndex }) {
                    if (this.selectRow.includes(rowIndex)) {
                        return { "background-color": "#5aabff" };
                    }
                },
                // 关闭窗口
                handleClose() {
                    this.remoteClose();
                },

                // 打开上传子弹窗********************************************
                openUpload() {
                    this.uploadvisible = true;
                    this.fileList = [];
                },
                //   提交上传
                submitUpload() {
                    this.$refs.upload.submit();
                },
                handleChange(file, fileList) {
                    this.fileList = fileList;
                    let item = file;
                    console.log(file)
                    this.uploadList.push({"filename":item.name,wsize:item.size,txt:"",scr:"",status:item.status,uid:item.uid,id:item.uid});

                },
                // 获取到选择的信息，跳转至链接外查看
                lookUpload(row) {
                    if (row.status == "ready") {
                        window.open(row.url);
                    } else {
                        window.open(this.url + row.response.data.path);
                    }
                },
                // 删除当前待上传列
                deleteUpload(row) {
                    this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(async () => {
                            if (row.status == "ready") {
                                this.fileList = this.fileList.filter((e) => {
                                    return e.uid != row.uid;
                                });

                                this.uploadList = this.uploadList.filter((e) => {
                                    return e.uid != row.uid;
                                });

                                this.$message.success("已删除");
                            } else {
                                const params = {
                                    ids: row.id,
                                };
                                const res = await api.queryBody(
                                    "/admin/api/mirc/MedicalInsuranceReimbursementController/deleteAtthFiles",
                                    params
                                );
                                if (res.code == 1) {
                                    this.$message.success(res.msg);
                                    this.getUploadList();
                                } else {
                                    this.$message.error(res.msg);
                                }
                            }
                        })
                        .catch((e) => {
                            console.log(e)
                            this.$message.info("已取消删除");
                        });
                },
                // 文件上传之前
                before(file) {
                },
                handleSuccess(res) {
                    console.log(res);
                    if (res.code == 1) {
                        this.$message.success("上传成功");
                        this.getUploadList();
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                // 关闭子窗口
                upLoadClose(){
                    this.uploadvisible = false;
                    this.getUploadList();
                }
            },
            watch: {
                chooseArr(data) {
                    this.selectRow = [];
                    if (data.length > 0) {
                        data.forEach((item, index) => {
                            this.selectRow.push(this.uploadList.indexOf(item));
                        });
                    }
                },
            },
        });
    </script>
</body>
</html>